<template>
  <div class="credit-risk-control">
    <Header />
    <div class="content">
      <div class="top"><h2>交通银行应用验证</h2></div>
      <div id="content-box">
        <div id="left">
          <div class="side-inner-box">
            <div class="item" id="left-one"><img src="../../assets/images/14-3.png"></div>
            <div class="item" id="left-two"><img src="../../assets/images/2-2.png"></div>
            <div class="item" id="left-three">
              <div id="left-three-inner"><img src="../../assets/images/13-3-背书.png"></div>
              <div id="left-three-inner-two">
                <div class="inner-two" id="left-three-inner-two-inner"><span>违法<br>背卖</span></div>
                <div class="inner-two"><span>贴现<br>套利</span></div>
              </div>
            </div>
            <div class="item" id="left-four"><img src="../../assets/images/4-4.png"></div>
          </div>
        </div>
        <div id="center">
          <!-- <div id="inner-box-one">
            <div class="left-box" id="left-box-one"><span>识别票据<br>中介节点</span><img src="../../assets/images/center-left-1.png"></div>
            <div class="left-box" id="left-box-two"><span>金融<br>知识<br>大图</span><img src="../../assets/images/center-left-2.png"></div>
            <div class="left-box" id="left-box-three"><img src="../../assets/images/center-left-3.png"><span>账户交易关系</span></div>
          </div>
          <div id="inner-box-two">
            <div class="right-box" id="right-box-one"><img src="../../assets/images/center-right-1.png"><span>大语言模型</span></div>
            <div class="right-box" id="right-box-two"><div><span>提示学习</span></div></div>
            <div class="right-box" id="right-box-three"><img src="../../assets/images/center-right-3.png"><span>企业风险事件</span></div>
          </div> -->
        </div>
        <div id="right">
          <div class="side-inner-box">
            <div class="item">
              <h3>图神经网络</h3>
             
              <div id="right-one"><img src="../../assets/images/1-1.png"></div>
            </div>
            <div class="item" >
              <h3>时序关联</h3>
              
              <div id="right-two"><img src="../../assets/images/1-2.png"></div>
            </div>
            <div class="item" >
              <h3>多元协同</h3>
              
              <div id="right-three"><img src="../../assets/images/1-3.png"></div>
            </div>
            <div id="right-four"><img src="../../assets/images/1-4.png"></div>
          </div>
        </div>       
      </div>    
    </div>
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
</script>

<style lang="scss" scoped>
.credit-risk-control {
  height: 100%;
  //width: 80%;
  background-color: #06263c;
  color: #fff;
  display: flex;
  flex-direction: column;
  background: url(../../assets/images/6-7背景图.jpg) no-repeat center;
  background-size: cover;
}

.content{
  width: 100%;
  height: 87%;
}

.content .top{
  width: 30%;
  margin: auto;
  text-align: center;
  font-size: 270%;
}

#content-box{
  width: 90%;
  //width: 1400px;
  height: 92%;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

#left{
  //width: 20%;
  width: 280px;
  // height: auto;
  height: 800px;
  border-radius: 7px;
  background-color:#3f4d55;
  box-sizing: border-box;
}

#center{
  flex-grow: 1;
  box-sizing: border-box;
  height: 800px;
  margin: 0 10px;
  display: flex;
  background-color: #4e89a8;
  #inner-box-one{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .left-box{
      font-size: 16px;
      font-weight: bold;
    }

    #left-box-one{
      width: 100%;
      height: 20%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background-color: aqua;
      // position: relative;
      // top: 7%;
      /*span{
        float: left;
        position: relative;
        left: 25%;
        top: 60%;
        
      }

      img{
        float: left;
        position: relative;
        left: 30%;
        top: 30%;
      }*/
    }

    #left-box-two{
      width: 100%;
      height: 60%;
      span{
        // float: left;
        // position: relative;
        // left: 10%;
        // top: 40%;
      }
      
      img{
        // max-width: 100%;
        // height: auto;
        // display: inline-block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        // position: relative;
        // top:-20%;
        // left:10%;
      }
    }

    #left-box-three{
      width: 100%;
      height: 20%;
      // display: flex;
      // flex-direction: column;
      // position: relative;
      // top: -10%;
      // left: 10%;
      span{
        float: left;
        // margin-left: 130px;
        position: relative;
        left: 37%;
      }
      img{
      // max-width: 100%;
      
      // display: inline-block;
      // position: relative;
      // //object-fit: cover;
      width: 100%;
      height: 100%;
      object-fit: contain;
      }     
  }
}
  #inner-box-two{
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    #right-box-one{
      width: 100%;
      height: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: bisque;
      // position: relative;
      // top: 5%;
      img{
        
        max-width: 100%;
        height: auto;
        display: inline-block;
      }
      span{
        font-size: 16px;
        font-weight: bold;
       
      }
    }
    #right-box-two{
      width: 100%;
      height: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      // position: relative;
      // top: 6%;
      div{
        width: 50%;
        height: 40%;
        background-color: #4e89a8;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
          font-size: 40px;
        }
      }
    }
    #right-box-three{
      width: 100%;
      height: 40%;
      // position: relative;
      // top:-2%;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      span{
        // position: relative;
        // left: 39%;
        // top: -20%;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}

#right{
  //width: 20%;
  width: 280px;
  // height: auto;
  height: 800px;
  border-radius: 7px;
  background-color:#3f4d55;
  box-sizing: border-box;
}

.side-inner-box{
  height: 96%;
  border-radius: 7px;
  margin: 10px;
  background-color: #2a3b47;
}

.side-inner-box .item{
  border: dashed 2px black;
  border-radius: 7px;
  margin: 5px 0;
}

#left .side-inner-box .item{
  height: 24.4%;
}

#right .side-inner-box .item{
  height: 27%;
}

#left-one{
  width: 100%;
}

#left-one img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#left-two{
  width: 100%;
  text-align: center;
  //line-height: 24.4%;
}

#left-two img{
  max-width: 100%;
  height: auto;
  display: inline-block;
}

#left-three{
  display: flex;
  flex-direction: row;
}
#left-three #left-three-inner{
  width: 68%;
  box-sizing: border-box;
  text-align: center;
  //height: 100%;
}
#left-three #left-three-inner img{
  // width: 100%;
  // height: 100%;
  // object-fit: cover;
  max-width: 100%;
  height: auto;
  display: inline-block;
}
#left-three #left-three-inner-two{
  width: 32%;
  //height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#left-three #left-three-inner-two .inner-two{
  width: 80%;
  height: 40%;
  text-align: center;
  margin: 10% 0;
  border: solid 2px red;
  display: flex;
  justify-content: center;
  align-items: center; 
}

#left-three #left-three-inner-two .inner-two span{
  //display: block;
  //margin: 2% 0 0;
  font-size: 18px;
  // line-height: 48.8%;
  // text-align: center;
}

#left-four{
  width: 100%;
}
#left-four img{
  
  height: 100%;
  margin:auto;
  display: block;
}
#right .side-inner-box .item h3{
  font-size: 20px;
  text-align: center;
}
#right-one{
  // width: 100%;
  width: 100%;
  text-align: center;
  // display: flex;
  // justify-content: center;
  // align-items: center; 
}
#right-one img{
  // width: 52%;
  // height: 100%;
  // margin:auto;
  // display: block;
  max-width: 100%;
  height: auto;
  display: inline-block;
}
#right-two{
  width: 100%;
  text-align: center;
}
#right-two img{
  max-width: 100%;
  height: auto;
  display: inline-block;
}
#right-three{
  width: 100%;
  text-align: center;
}
#right-three img{
  max-width: 100%;
  height: auto;
  display: inline-block;
}

#right-four{
  width: 100%;
  height:16.6%;
  padding: 0 5px;
  text-align: center;
}
#right-four img{
  // width: 100%;
  // //height: auto;
  // object-fit: cover;
  max-width: 100%;
  height: auto;
  line-height: 16.6%;
  display: inline-block;
}
</style>
